<template>
	<view>
		<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
	   
	</view>
</template>

<script module="animate" lang="renderjs">
	const Coin = {
	  x: 'x轴位置',
	  y: 'y轴位置', // 运动的关键是在每一帧都改变y
	  radius: '金币大小',
	  img: '前面缓存好的金币图片',
	  speed: '金币的下落速度'
	};
	let ctx = null
	export default {
		data() {
			return {
		        imgArr: [
					{
						img:'../../static/images/jewel/beStore_bg.jpg'
					},
					{
						img:'../../static/images/jewel/beStore_bg.jpg'
					},
					{
						img:'../../static/images/jewel/beStore_bg.jpg'
					}
				],
				preloaded:false
			};
		},
	    onReady: function (e) {
	  //       var canvas = uni.createCanvasContext('myCanvas');
	  //       var ctx = canvas.getContext('2d');
	  //       canvas.fillStyle='#FF0000';
	  //       canvas.fillRect(0,0,80,100);
			// canvas.draw()
			this.initCanvas()
			this.start()
	    },
	    methods: {
			initCanvas() {
				var canvas = uni.createCanvasContext('myCanvas');
				ctx = canvas
				// 初始化时同步进行图片预加载
				this.loadImgs(this.imgArr);
			},
	        loadImgs(arr) {
	          return new Promise(resolve => {
	            let count = 0;
	            // 循环图片数组，每张图片都生成一个新的图片对象
	            const len = arr.length;
	            for (let i = 0; i < len; i++) {
	              // 创建图片对象
	              const image = new Image();
	              // 成功的异步回调
	              image.onload = () => {
	                count++;
	                arr.splice(i, 1, {
	        	  // 加载完的图片对象都缓存在这里了，canvas可以直接绘制
	                  img: image,
	        	  // 这里可以直接生成并缓存离屏canvas，用于优化性能，但本次不用，只是举个例子
	                  offScreenCanvas: this.createOffScreenCanvas(image)
	                });
	        	// 这里说明 整个图片数组arr里面的图片全都加载好了
	                if (count == len) {
	                  this.preloaded = true;
	                  resolve();
	                }
	              };
	              image.src = arr[i].img;
	            }
	          });
	        },
			createOffScreenCanvas(image) {
			  const offscreenContext = uni.createCanvasContext('myCanvas');
			  // const offscreenContext = offscreenCanvas.getContext("2d");
			  // 这里可以是动态宽高
			  offscreenContext.width = 30;
			  offscreenContext.height = 30;
			  offscreenContext.drawImage(
			    image,
			    0,
			    0,
			    offscreenContext.width,
			    offscreenContext.height
			  );
			  // return这个offscreenCanvas
			  return offscreenContext;
			},
			drawCoins() {
			  // 遍历这个金币对象数组
			  this.coinArr.forEach((coin, index) => {
			    const newCoin = {
			      x: coin.x,
			      // 运动的关键  每次只有y不一样
			      y: coin.y + coin.speed,
			      radius: coin.radius,
			      img: coin.img,
			      speed: coin.speed
			    };
			    // 绘制某个金币对象时，也同时生成一个新的金币对象，替换掉原来的它，唯一的区别就是它的y变了，下一帧绘制这个金币时，就运动了一点点距离
			    this.coinArr.splice(index, 1, newCoin);
			    ctx.drawImage(
			      coin.img,
			      coin.x,
			      coin.y,
			      coin.radius,
			      coin.radius * 1.5
			    );
			  });
			},
			moveCoins() {
			  // 清空canvas
			  ctx.clearRect(0, 0, this.innerWidth, this.innerHeight);
			  // 绘制新的一帧动画
			  this.drawCoins();
			  // 不断执行绘制，形成动画
			  this.moveCoinAnimation = window.requestAnimationFrame(this.moveCoins);
			},
			start() {
			  this.pushCoins(); // 不断增加金币
			  this.moveCoins(); // 金币开始运动
			  // 开始10秒倒计时
			  this.runCountdownTimer = setInterval(() => {
			  //...倒计时10s后，做一些停止动画的工作
			  }, 1000);
			},
			randomRound(max,min){
				return Math.floor(Math.random() * max + 1)
			},
			pushCoins() {
			  // 每次随机生成1~3个金币
			  const random = this.randomRound(3, 6);
			  let arr = [];
			  for (let i = 0; i < random; i++) {
			    // 创建新的金币对象
			    const newCoin = {
			      x: this.random(
			        this.calculatePos(10),
			        this.innerWidth - this.calculatePos(150)
			      ), // 横向随机  金币不要贴近边边
			      y: 0 - this.calculatePos(Math.random() * 150), // -150内高度 随机
			      radius: this.calculatePos(120 + Math.random() * 30), // 100宽  大小浮动15
			      img: this.coinObjs[this.randomRound(0, 3)].img, // 随机取一个金币图片对象，这几个图片对象在页面初始化时就已经缓存好了
			      speed: this.calculatePos(Math.random() * 7 + 5) // 下落速度 随机
			    };
			    arr.push(newCoin);
			  }
			  // 每次都插入一批新金币对象arr到运动的金币数组this.coinArr
			  this.coinArr = [...this.coinArr, ...arr];
			  // 间隔多久生成一批金币
			  this.addCoinsTimer = setTimeout(() => {
			    this.pushCoins();
			  }, 600);
			},
	    }
	}
</script>

<style>
</style>
